Review Create React App and Static Views

Learning Objectives

• Review Create React App
• Review all the React we learned yesterday by rebuilding a new app

Let's get started

Let's build a playlist maker called Tunr

Create React Docs

• npx create-react-app tunr_app
• cd tunr_app
• rm -rf .git - because we are in the class repository - no git reps inside other git repos!
• open a new tab in terminal
• npm start
• in the other open tab atom .

Let's look at our folders

We will be working in the src folder. All the code in that folder will get compiled into the react app.

Code outside of the src folder will NOT be compiled into the react app. You can put more folders inside the src folder for organizational purposes.

The public folder is the actual html file that gets loaded into the browser. You can change the details in this file to match your app (app name, different favicon, update the manifest.json)

Make This App Our Own

Let's remove all the create react app showcase stuff in src/App.js and rewrite the component into the same syntax we've been practicing.

We can also get a little fancy and use destructuring to pull out the Component object out of React:

App.js

import React, { Component } from "react";

class App extends Component {
  render() {
    return <div></div>;
  }
}

export default App;

Our component, now should look familiar to yesterday. Check your browser - no errors is good.

In Chrome Dev tools Elements tab:

We see some extra stuff like noscript - that is coming from public/src/index.html. You can customize this for your projects but you don't need to do anything for your labs and hw.

Remember, React uses import export portions of code. This is conceptually the same as require() and module.exports() we saw in our node apps in the previous units.

Creating our Static App first

Here is our mockup

• We have an App component and inside it we have a
• a header
• form component
• two playlist components
  • playlist components are made up of
    • a table with a header
    • table cells for each song
• a footer

We added a click event that allowed us to click on the h1 and change the h2 below it

• mkdir src/components

• touch src/components/Footer.js

• touch src/components/Header.js

• touch src/components/Playlist.js

• touch src/components/Song.js

• touch src/data.js (we'll add some 'data' a bit later)

• Copy and paste the following CSS code in into index.css

/* colors: https://www.canva.com/learn/website-color-schemes/ */
:root {
  --grey-blue: #a9b7c0;
  --calm-minty: #c7d8c6;
  --dusty-apricot: #efd9c1;
  --cement-powder: #cccbc6;
  --almost-white: #fcfbfa;
  --text-shadows: 2px 2px 3px #999;
}

body {
  margin: 0;
  background-color: var(--almost-white);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
}

#root > div {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

main {
  flex: 1;
  display: flex;
  justify-content: space-around;
  margin-top: 2em;
}

main h3 {
  background-color: var(--calm-minty);
}

main div {
  flex-basis: 45%;
  margin: 1em;
}

header {
  background: var(--grey-blue);
  padding: 1em;
  margin-bottom: 1em;
}

h1,
h3 {
  margin: 0;
  color: var(--almost-white);
  text-shadow: var(--text-shadows);
}

h3 {
  text-align: center;
  padding: 0.5em;
}

footer {
  height: 4em;
  background-color: var(--grey-blue);
  grid-row-start: 2;
  grid-row-end: 3;
}

form {
  width: 90%;
  margin: auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  background-color: var(--cement-powder);
  padding: 1em;
  color: var(--almost-white);
}

label {
  flex-basis: 45%;
  display: flex;
  justify-content: center;
}

input[type='text'] {
  text-align: center;
  margin-left: 0.5em;
  margin-bottom: 0.5em;
  color: var(--grey-blue);
  padding: 0.1em 0;
  font-size: 1em;
}

input[type='submit'] {
  text-align: center;
  margin-left: 1.5em;
  background-color: var(--calm-minty);
  border: 1px solid var(--grey-blue);
  padding: 0 3em;
}

table {
  border: none;
  width: 100%;
  text-align: center;
  background-color: var(--dusty-apricot);
}

th {
  border: none;
  color: var(--almost-white);
  background: var(--cement-powder);
}

tbody tr:hover {
  opacity: 0.5;
}
tr:nth-child(even) {
  color: #fff;
}

tr:nth-child(odd) {
  color: var(--grey-blue);
}

Build out our components

Footer.js

import React, { Component } from "react";

class Footer extends Component {
  render() {
    return <footer></footer>;
  }
}

export default Footer;

Header.js

Header.js

import React, { Component } from "react";

class Header extends Component {
  render() {
    return (
      <header>
        <h1>Tunr</h1>
      </header>
    );
  }
}

export default Header;

Add a Form below the header

App.js

App.js

<form>
  <label htmlFor="title">
    Song
    <input type="text" id="title" />
  </label>
  <label htmlFor="artist">
    Artist
    <input type="text" id="artist" />
  </label>
  <label htmlFor="time">
    Time
    <input type="text" id="time" />
  </label>
  <label>
    <input type="submit" />
  </label>
</form>

Add a Main tag that will hold one div for playlist info

App.js Details

App.js

<main>
  <div>
    <h3>Playlist 1</h3>
    <table>
      <thead>
        <tr>
          <th>Song</th>
          <th>Arist</th>
          <th>Time</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Song</td>
          <td>Artist</td>
          <td>Time</td>
        </tr>
        <tr>
          <td>Song</td>
          <td>Artist</td>
          <td>Time</td>
        </tr>
        <tr>
          <td>Song</td>
          <td>Artist</td>
          <td>Time</td>
        </tr>
        <tr>
          <td>Song</td>
          <td>Artist</td>
          <td>Time</td>
        </tr>
      </tbody>
    </table>
  </div>
</main>

Our app should look like this:

Hrrrmmm - this looks like a lot of code in one file... I wonder if we'll learn how to split up our code into smaller components soon...